import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity, 
  Clipboard,
  View,
  DeviceEventEmitter,
  InteractionManager
} from 'react-native';
import IconIonicons from 'react-native-vector-icons/Ionicons';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome'
import { inject, observer } from 'mobx-react';
import Toast from 'react-native-root-toast';

@inject((stores) => {
    return {
        inviteStore: stores.rootStore.inviteStore 
    }
})
@observer class InviteScreen extends React.Component {
    static navigationOptions = {
        title:'邀请',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
	}
    componentWillMount() {
        this.props.inviteStore.getPromoteIndex();
    }
    componentWillUnmount(){
        DeviceEventEmitter.emit('Home', {id: 1});
        DeviceEventEmitter.emit('Invitation', {id: 1});
    }
    async componentDidMount(){
        //当前进行的交互和动画完成后再执行,执行下面的其他方法
        await InteractionManager.runAfterInteractions();
    }
    /**
     * 复制
     */
    _copy = (str) => {  
        Clipboard.setString(str+'');
        Toast.show('复制成功!',{
            duration: Toast.durations.LONG,
            position: Toast.positions.CENTER,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 10
        })
    }
    _getStyle = (index) =>{
        if(index === 0){
            return styles.ico1
        }else if(index === 1){
            return styles.ico2
        }else if(index === 2){
            return styles.ico3
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.ranKView}>
                    {
                        this.props.inviteStore.ranks.map((item,index)=>{
                        return   (
                                    <View style={styles.rankItem} key={index + ''}>
                                        <IconIonicons style={this._getStyle(index)} name='ios-trophy'></IconIonicons>
                                        <Text style={styles.name}>{item.mobile}</Text>
                                        <Text style={styles.nums}><Text style={styles.c2}>{item.count}</Text>个</Text>
                                        <Text style={styles.c2}>{item.give} NSS</Text>
                                    </View>
                                    )
                        })
                    }
                </View>
                <View style={styles.resultItem}>
                    <View style={styles.inviteItem}>
                        <View style={styles.iTit}>
                            <Text>您的推广码</Text>
                            <IconFontAwesome style={styles.c2} name='arrowdown'></IconFontAwesome>
                        </View>
                        <View style={styles.iBtm}>
                            <Text>{this.props.inviteStore.inviteIndex.inviteCode}</Text>
                            <TouchableOpacity onPress={()=>this._copy(this.props.inviteStore.inviteIndex.inviteCode)}>
                                <View style={styles.btn}>
                                    <Text style={styles.btnTxt}>复制</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.inviteItem}>
                        <View style={styles.iTit}>
                            <Text>您的推广链接</Text>
                            <IconFontAwesome style={styles.c2} name='arrowdown'></IconFontAwesome>
                        </View>
                        <View style={styles.iBtm}>
                            <Text>{this.props.inviteStore.inviteIndex.inviteUrl}</Text>
                            <TouchableOpacity onPress={()=>this._copy(this.props.inviteStore.inviteIndex.inviteUrl)}>
                                <View style={styles.btn}>
                                    <Text style={styles.btnTxt}>复制</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                        <View style={styles.inviteCode}>
                            <View style={styles.inviteCodeItem}>
                                {/* <QRCode
                                    style={styles.codeImg}
                                    value={this.props.inviteStore.inviteIndex.inviteUrl}
                                    size={60}
                                />  */}
                                {
                                    this.props.inviteStore.inviteIndex.inviteUrl64 !== '' ? 
                                    <Image 
                                        source={{uri:this.props.inviteStore.inviteIndex.inviteUrl64}}
                                        style={styles.codeImg} />
                                    :
                                    <Image style={styles.codeImg} />
                                }
                                <Text style={styles.codeTxt}>邀请二维码</Text>
                            </View>
                            <View style={styles.inviteCodeItem}>
                                {
                                    this.props.inviteStore.inviteIndex.androidUrl !== '' ? 
                                    <Image 
                                    source={{uri:this.props.inviteStore.inviteIndex.androidUrl}}
                                    style={styles.codeImg} />
                                    :
                                    <Image style={styles.codeImg} />
                                }
                                <Text style={styles.codeTxt}>安卓下载</Text>
                            </View>
                            <View style={styles.inviteCodeItem}>
                                {
                                    this.props.inviteStore.inviteIndex.iosUrl !== '' ? 
                                    <Image 
                                    source={{uri:this.props.inviteStore.inviteIndex.iosUrl}}
                                    style={styles.codeImg} />
                                    :
                                    <Image style={styles.codeImg} />
                                }
                                
                                <Text style={styles.codeTxt}>苹果下载</Text>
                            </View>
                        </View>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
	container:{
		flex: 1,
		display: 'flex',
        flexDirection:'column',
        backgroundColor:"#FFFFFF"
    },
    ranKView:{
        paddingTop: 20,
        paddingLeft: 10, 
        paddingRight: 10,
    },
    rankItem:{
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row',
        marginTop: 15,
    },
    ico1:{
        color:'#F4CC03',
        fontSize: 30,
    },
    ico2:{
        fontSize: 30,
        color:'#E6E8FA'
    },
    ico3:{
        fontSize: 30,
        color:'#CD7F32'
    },
    name:{
        fontSize: 14,
        color:'#101010'
    },
    nums:{
        fontSize: 14,
        color:'#101010'
    },
    c2:{
        fontSize: 14,
        color:'#FF7F4B'
    },
    resultItem:{
        marginTop: 20,
        padding: 10,
    },
    inviteItem:{
        paddingTop:30,
        paddingBottom: 10,
        borderBottomColor: '#BBBBBB',
        borderBottomWidth: 1,
    },
    iTit:{
        display:'flex',
        flexDirection:'row',
        fontSize:14
    },
    iBtm:{
        marginTop: 20,
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems: 'center',
    },
    btn:{
        width: 80,
        height: 30,
        lineHeight: 30,
        backgroundColor:'#FF7F4B',
        textAlign:'center',
        borderRadius: 8,
    },
    btnTxt:{
        fontSize: 16,
        color: '#ffffff',
        lineHeight: 30,
        textAlign:'center'
    },
    inviteCode:{
        display:'flex',
        justifyContent: 'space-around',
        flexDirection: 'row',
        borderBottomColor: '#BBBBBB',
        borderBottomWidth: 1,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 10,
        marginTop: 20
    },
    codeTxt:{
        textAlign:'center',
        color:'#BBBBBB',
        fontSize: 14,
        marginTop: 10
    },
    loading:{
        position:'absolute',
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
        backgroundColor:'#ffffff',
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        zIndex:2
    },
    codeImg:{
        width: 60,
        height: 60
    }
});
export default InviteScreen;